<template>
  <div class="detail-main">
    <div class="column">
      <div
        :class="[
          'column-part',
          'thumb',
          detailName === 'attribute' ? 'sel' : 'nosel',
        ]"
        @click="() => (detailName = 'attribute')"
      >
        商品属性
      </div>
      <div
        :class="[
          'column-part',
          'thumb',
          detailName === 'description' ? 'sel' : 'nosel',
        ]"
        @click="() => (detailName = 'description')"
      >
        商品描述
      </div>
      <div
        :class="[
          'column-part',
          'thumb',
          detailName === 'price' ? 'sel' : 'nosel',
        ]"
        @click="() => (detailName = 'price')"
      >
        价格说明
      </div>
    </div>
    <div class="content" v-show="detailName === 'attribute'">
     <Attribute />
    </div>
    <div class="content" v-show="detailName === 'description'">
     <Description />
    </div>
    <div class="content" v-show="detailName === 'price'">
     <Price />
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import Attribute   from "./components/Attribute/index.vue";
import Description   from "./components/Description/index.vue";
import Price  from "./components/Price/index.vue";
const detailName = ref<"attribute" | "description" | "price">("attribute");
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
